<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngulaJS 服务</title>
		<style>
			body{
			  font-family: 'microsoft yahei',Arial,sans-serif;
			}
			
			h1{
			  font-weight:500;
			  font-size:24px;
			}
			
			input,button{
			  padding:10px;
			}

		</style>
	</head>

	<body>
		<h1>AngularJS 服务演示</h1>
<hr>
<div ng-app="mainApp" ng-controller="MY_Controller">
  <p>输入一个数值: </p>
  <p><input type="number" ng-model="number" /></p>
  <button ng-click="myClick()">计算平方 X<sup>2</sup></button>
  <p>计算结果: {{result}}</p>
</div>
		
		<script src="http://cdn.gbtags.com/angular.js/1.2.20/angular.min.js"></script>
		<script>
			var mainApp = angular.module("mainApp", []);
			// Factory是一个用来返回值的方法。一旦服务或者控制器需要就创建了一个需要的值。这里使用工厂方法计算并且返回值
			mainApp.factory('My_Math', function(){
				var factory = {};
				factory.chengfa = function(a, b){
					return a * b;
				};
				return factory;
			});
			// 服务是一个单例的Javascript对象，包含了一系列的方法执行特定任务。Service是使用service方法定义，并且注入到控制器
			mainApp.service('My_Service', function(My_Math){
				this.myClick = function(a){
					return My_Math.chengfa(a, a);
				};
			});
			// 控制器中使用到了定义好的服务
			mainApp.controller('MY_Controller', function($scope, My_Service){
				$scope.myClick = function(){
					$scope.result = My_Service.myClick($scope.number);
				};
			});
			
		</script>
	</body>

</html>